<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('认领人')" prop="claimBy">
            <!-- <UserSelect
              v-model="form.claimBy"
              :placeholder="$t('认领人')"
              disabled
            /> -->
            <el-input v-model="form.claimByName" :placeholder="$t('认领人')" show-word-limit maxlength="50" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('认领时间')" prop="claimTime">
            <el-date-picker
              v-model="form.claimTime"
              clearable
              type="datetime"
              placeholder="认领时间"
              style="width: 100%"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('项目名称')" prop="dealId">
            <!-- <MainBodySelect
              v-model="form.dealId"
              parameters="deal"
              disabled
              @change="getDeal(form.dealId)"
            /> -->
            <el-input v-model="form.dealName" :placeholder="$t('项目名称')" show-word-limit maxlength="50" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('项目类型')" prop="dealType">
            <!-- <el-select v-model="form.dealType" :placeholder="$t('项目类型')" disabled>
              <el-option
                v-for="dict in dealTypeOptions"
                :key="dict.dictValue"
                :label="$t(dict.dictLabel)"
                :value="dict.dictValue"
              />
            </el-select> -->
            <el-input v-model="form.dealTypeName" :placeholder="$t('项目类型')" show-word-limit maxlength="50" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('公司代码')" prop="companyNumber">
            <el-input v-model="form.companyNumber" :placeholder="$t('公司代码')" show-word-limit maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('交易流水号')" prop="tradeNumber">
            <el-input v-model="form.tradeNumber" :placeholder="$t('交易流水号')" show-word-limit maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('交易方式')" prop="tradeWay">
            <el-input v-model="form.tradeWay" :placeholder="$t('交易方式')" show-word-limit maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('交易日期')" prop="tradeTime">
            <el-date-picker
              v-model="form.tradeTime"
              clearable
              style="width: 200px"
              type="date"
              value-format="yyyy-MM-dd"
              :placeholder="$t('交易日期')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('交易币种')" prop="tradeCurrency">
            <el-select v-model="form.tradeCurrency" :placeholder="$t('投资币种')">
              <el-option
                v-for="dict in currencyOptions"
                :key="dict.dictValue"
                :label="$t(dict.dictLabel)"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('交易金额（万）')" prop="tradeMoney">
            <Money v-model="form.tradeMoney" unit="w" :placeholder="$t('交易金额（万）')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('人民币金额（万）')" prop="cnyMoney">
            <Money v-model="form.cnyMoney" unit="w" :placeholder="$t('人民币金额（万）')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('我方银行号码')" prop="myAccountNumber">
            <el-input v-model="form.myAccountNumber" :placeholder="$t('我方银行号码')" show-word-limit maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('我方账户名称')" prop="myAccountName">
            <el-input v-model="form.myAccountName" :placeholder="$t('我方账户名称')" show-word-limit maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('开户行标识')" prop="openBankMark">
            <el-input v-model="form.openBankMark" :placeholder="$t('开户行标识')" show-word-limit maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('账户标识')" prop="accountMark">
            <el-input v-model="form.accountMark" :placeholder="$t('账户标识')" show-word-limit maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('我方开户行代码')" prop="openBankNumber">
            <el-input v-model="form.openBankNumber" :placeholder="$t('我方开户行代码')" show-word-limit maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('我方开户行名称')" prop="openBankName">
            <el-input v-model="form.openBankName" :placeholder="$t('我方开户行名称')" show-word-limit maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('对方银行账号')" prop="oppositeAccountNumber">
            <el-input v-model="form.oppositeAccountNumber" :placeholder="$t('对方银行账号')" show-word-limit maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('对方户名')" prop="oppositeAccountName">
            <el-input v-model="form.oppositeAccountName" :placeholder="$t('对方户名')" show-word-limit maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('对方开户行代码')" prop="oppositeOpenBankNumber">
            <el-input v-model="form.oppositeOpenBankNumber" :placeholder="$t('对方开户行代码')" show-word-limit maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('对方开户行名称')" prop="oppositeOpenBankName">
            <el-input v-model="form.oppositeOpenBankName" :placeholder="$t('对方开户行名称')" show-word-limit maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('用途')" prop="purpose">
            <el-input v-model="form.purpose" :placeholder="$t('用途')" show-word-limit maxlength="1000" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('公司名称')" prop="companyName">
            <el-input v-model="form.companyName" :placeholder="$t('公司名称')" show-word-limit maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('人员名称')" prop="userName">
            <el-input v-model="form.userName" :placeholder="$t('人员名称')" show-word-limit maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('流水状态描述')" prop="flowStatusRemark">
            <el-input v-model="form.flowStatusRemark" :placeholder="$t('流水状态描述')" show-word-limit maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('会计科目')" prop="accountSubject">
            <el-input v-model="form.accountSubject" :placeholder="$t('会计科目')" show-word-limit maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('交易记录状态')" prop="tradeRecordStatus">
            <el-input v-model="form.tradeRecordStatus" :placeholder="$t('交易记录状态')" show-word-limit maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('状态')" prop="status">
            <el-input v-model="form.status" :placeholder="$t('状态')" show-word-limit maxlength="50" disabled />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存 取消按钮-->
      <!-- <save-btn has-permi="deal:collectionFlow" :save-show="visible&&form.id&&form.id!==undefined&&form.id!==null&&form.id!==''&&this.$store.state.user.userId===form.claimBy" /> -->
      <save-btn has-permi="deal:collectionFlow" :save-show="visible" />
    </div>

  </div>
</template>

<script>
    import { saveCollectionFlow, getCollectionFlow } from '@/api/deal/collectionFlow/collectionFlow'
    // import MainBodySelect from '@/components/MainBodySelect'
    // import { getDealBase } from '@/api/base/deal/dealBase'
    export default {
        components: {
          // MainBodySelect
        },
        data() {
            return {
                // 表单参数
                form: {},
                // 遮罩层
                loading: false,
                // 币种
                currencyOptions: [],
                // 项目类型
                // dealTypeOptions: [],
                visible: false,
                // 表单校验
                rules: {
                  companyNumber: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
                  tradeNumber: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
                  tradeTime: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
                  tradeCurrency: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
                  tradeMoney: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
                  cnyMoney: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
                  myAccountNumber: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
                  myAccountName: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
                  oppositeAccountNumber: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
                  oppositeAccountName: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }]
                }
            }
        },
        created() {
          // 币种
          this.getDicts('currency').then(response => {
            this.currencyOptions = response.data
          })
          // 项目类型
          // this.getDicts('deal_type').then(response => {
          //   this.dealTypeOptions = response.data
          // })
        },
        methods: {
            // 初始化数据
            init(data, visible) {
                this.loading = true
                this.visible = visible
                if (data != null && data.id !== undefined) {
                    getCollectionFlow(data.id).then(response => {
                        this.form = response.data
                        this.loading = false
                    }).catch(() => {
                      this.loading = false
                    })
                } else {
                    this.reset()
                    this.loading = false
                }
            },
            // 表单重置
            reset() {
                this.form = {
                    id: undefined,
                    actId: undefined,
                    actTitle: undefined,
                    actStatus: undefined,
                    claimBy: undefined,
                    claimTime: undefined,
                    dealId: undefined,
                    dealName: undefined,
                    dealType: undefined,
                    distributionId: undefined,
                    companyNumber: undefined,
                    tradeNumber: undefined,
                    tradeWay: undefined,
                    tradeTime: undefined,
                    tradeCurrency: undefined,
                    tradeMoney: undefined,
                    cnyMoney: undefined,
                    myAccountNumber: undefined,
                    myAccountName: undefined,
                    openBankMark: undefined,
                    accountMark: undefined,
                    openBankNumber: undefined,
                    openBankName: undefined,
                    oppositeAccountNumber: undefined,
                    oppositeAccountName: undefined,
                    oppositeOpenBankNumber: undefined,
                    oppositeOpenBankName: undefined,
                    purpose: undefined,
                    companyName: undefined,
                    userName: undefined,
                    flowStatusRemark: undefined,
                    accountSubject: undefined,
                    tradeRecordStatus: undefined,
                    status: '未认领',
                    remark: undefined,
                    createBy: undefined,
                    createTime: undefined,
                    updateBy: undefined,
                    updateTime: undefined,
                    delFlag: undefined
                }
                this.resetForm('form')
            },
            // 取消按钮
            cancel() {
                this.$parent.$parent.formOpen = false
                this.$parent.$parent.reset()
            },
            // 关闭form页面
            closeForm() {
                // 关闭form页面遮罩层
                this.loading = false
                // 关闭form页面
                if (this.$parent.$parent.formOpen !== undefined) {
                  this.$parent.$parent.formOpen = false
                }
                // 刷新list页面
                if (this.$parent.$parent.getList !== undefined) {
                  this.$parent.$parent.getList()
                }
            },
            /** 提交按钮 */
            submitForm() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        this.loading = true
                        saveCollectionFlow(this.form).then(response => {
                            if (response.code === 200) {
                                this.msgSuccess(this.$t('保存成功'))
                                this.closeForm()
                            } else {
                                this.msgError(response.msg)
                            }
                            this.loading = false
                        })
                    } else {
                       this.locationError(document)
                    }
                }).catch(() => {
                    this.loading = false
                })
           }
          //  getDeal(dealId) {
          //     getDealBase(dealId).then(response => {
          //       this.form.dealType = response.data.dealType
          //     })
          //   },
        }
    }
</script>
